<template>
  <entity-view
    :operator-type="operatorType"
    :model="beanInfo"
    @submit="submit"
    :rules="rules"
    ref="form"
  >
    <a-tabs v-model="tabActiveKey">
      <a-tab-pane
        key="baseInfo"
        tab="交易基本信息"
        :disabled="tabActiveKey !== 'baseInfo'"
      >
        <a-form-model :model="beanInfo">
          <a-form-model-item>
            <base-info-form
              @submit="baseInfoSubmit"
              ref="baseInfoForm" />
          </a-form-model-item>
        </a-form-model>
      </a-tab-pane>
      <a-tab-pane
        key="timeInfo"
        tab="交易时间窗口"
        :disabled="tabActiveKey !== 'timeInfo'"
      >
        <a-form-model :model="beanInfo">
          <a-form-model-item>
            <time-info-form
              @submit="timeInfoSubmit"
              ref="timeInfoForm"
            ></time-info-form>
          </a-form-model-item>
        </a-form-model>
      </a-tab-pane>
      <a-tab-pane
        key="limitInfo"
        tab="交易业务限制"
        :disabled="tabActiveKey !== 'limitInfo'"
      >
        <a-form-model :model="beanInfo">
          <a-form-model-item>
            <limit-info-form
              @submit="limitInfoSubmit"
              ref="limitInfoForm"
            ></limit-info-form>
          </a-form-model-item>
        </a-form-model>
      </a-tab-pane>
      <a-tab-pane
        key="feeInfo"
        tab="交易费率"
        :disabled="tabActiveKey !== 'feeInfo'"
      >
        <a-form-model :model="beanInfo">
          <a-form-model-item>
            <fee-info-form
              @submit="feeInfoSubmit"
              ref="feeInfoForm"
            ></fee-info-form>
          </a-form-model-item>
        </a-form-model>
      </a-tab-pane>
    </a-tabs>
  </entity-view>
</template>
<script>
import EntityView from "../../../../components/common/entityView/EntityView.vue";
import FormItem from "../../../../components/common/entityView/FormItem.vue";
import BaseInfoForm from "../tradeInfo/BaseInfoForm";
import TimeInfoForm from "../tradeInfo/TimeInfoForm";
import LimitInfoForm from "../tradeInfo/LimitInfoForm";
import FeeInfoForm from "../tradeInfo/FeeInfoForm";

export default {
  name: "TradeInfoFormOperation",
  components: {
    EntityView,
    FormItem,
    BaseInfoForm,
    TimeInfoForm,
    LimitInfoForm,
    FeeInfoForm,
  },
  provide: function () {
    return {
      operationContext: this,
    };
  },
  props: {
    query: Object,
  },
  data: function () {
    return {
      modalTitle: "",
      operatorType: "update",
      modalVisible: true,
      tabActiveKey: "",
      // tabActiveKey: "feeInfo",
      beanInfo: {
        baseProdCode: "",
        prodName: "",
        prodDesc: "",
      },
      rules: {
        dstChannelName: [{ required: true, message: "必输", trigger: "blur" }],
      },
      selectOptions: [],
      loading: false,
      pageInfo: {},
    };
  },
  computed: {},
  //监听
  watch: {
    tabActiveKey (val, oldVal) {
      this.$nextTick(() => {
      switch (val) {
        case 'baseInfo':
          this.$refs.baseInfoForm.getPageInfo(this.beanInfo);
          break;
        case 'timeInfo':
          this.$refs.timeInfoForm.getPageInfo(this.beanInfo);
          break;
        case 'limitInfo':
          this.$refs.limitInfoForm.getPageInfo(this.beanInfo);
          break;
        case 'feeInfo':
          this.$refs.feeInfoForm.getPageInfo(this.beanInfo);
          break;
      }
    })}
  },
  methods: {
    async submit() {
      let res;
      switch (this.operatorType) {
        case "edit":
          res = await this.edit();
          break;
        case "view":
          res = true;
          break;
        default:
          break;
      }
      return res;
    },



    async edit() {
      const res = await this.$refs.form.validate();
      if (res) {
        const params = {};
        Object.assign(params, this.beanInfo, {
          id: this.beanInfo.id,
          dstChannelId: this.beanInfo.dstChannelId,
          msgDstId: this.beanInfo.msgDstId,
          instId: this.beanInfo.instId,
          chnlOptFlag: 'view',
          channelTxn: this.beanInfo.channelTxn,
          optFlag: "upd",
        });
        const res = await this.$post(
          "/admin/fee/feeInfo/editChannelTxnRate",
          params
        );
        if (res.status === 200) {
          this.$message.success("保存成功！");
          return true;
        } else {
          this.$message.error(res.data.message);
          return false;
        }
      }
    },
    resetFields() {
      return this.$refs.form && this.$refs.form.resetFields();
    },
    setOperatorType(type) {
      this.operatorType = type;
    },
    setBeanInfo(beanInfo,instId) {
      this.beanInfo = beanInfo;
      this.instId = instId;
    },
    baseInfoSubmit() {
      console.log(...arguments);
    },
    timeInfoSubmit() {
      console.log(...arguments);
    },
    limitInfoSubmit() {
      console.log(...arguments);
    },
    feeInfoSubmit() {
      console.log(...arguments);
    },
    initTab() {
      this.tabActiveKey = 'baseInfo'
      // this.$nextTick(async () => {
      //   await this.$refs.baseInfoForm.getPageInfo(this.beanInfo);
      // })
    }
  },
};
</script>

<style lang="less" scoped>
@import "../../../../../static/less/Common";
.subtitle {
  width: 100%;
  font-size: 18px;
  margin-bottom: 10px;
}
.sub-content-flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.sub-content-block {
  display: block;
  flex-wrap: wrap;
  width: 100%;
}
</style>
